<script setup lang="ts">
import { onMounted, onUpdated, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from './stores/auth.ts';
import { useMenuStore } from './stores/menu';
import { useBreadcrumbStore } from './stores/breadcrumb';
import GlobalNotification from './components/layout/GlobalNotification.vue';

// 获取用户状态存储
const userStore = useUserStore();
const menuStore = useMenuStore();
const breadcrumbStore = useBreadcrumbStore();
const router = useRouter();

// Function to remove all close buttons from Element Plus messages
const removeCloseButtons = () => {
  // Select all close buttons in Element Plus messages and notifications
  const closeButtons = document.querySelectorAll('.el-message__closeBtn, .el-notification__closeBtn');
  
  // Hide all close buttons
  closeButtons.forEach(button => {
    if (button instanceof HTMLElement) {
      button.style.display = 'none';
      button.style.visibility = 'hidden';
      button.style.opacity = '0';
      button.style.width = '0';
      button.style.height = '0';
      button.style.padding = '0';
      button.style.margin = '0';
    }
  });
};

// Add a MutationObserver to dynamically remove close buttons as they are added
const setupCloseButtonObserver = () => {
  const observer = new MutationObserver((mutations) => {
    let shouldCheck = false;
    
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length > 0) {
        shouldCheck = true;
      }
    });
    
    if (shouldCheck) {
      removeCloseButtons();
    }
  });
  
  // Start observing the document body for changes
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
  
  return observer;
};

// When component is mounted
onMounted(async () => {
  // 初始化用户状态
  userStore.initUserState();
  
  // 初始化菜单数据
  if (userStore.isAuthenticated) {
    try {
      await menuStore.getUserMenu();
    } catch (error) {
      console.error('加载菜单失败:', error);
    }
  }
  
  // 初始化面包屑状态
  breadcrumbStore.initFromStorage();
  
  // Remove any existing close buttons
  removeCloseButtons();
  
  // Setup observer to watch for new close buttons
  const observer = setupCloseButtonObserver();
  
  // Clean up on unmount (though App.vue is rarely unmounted)
  // This is just for completeness
  return () => {
    observer.disconnect();
  };
});

// Also check after updates
onUpdated(() => {
  removeCloseButtons();
});

// 在组件卸载前确保清理资源
onBeforeUnmount(() => {
  // 可以在这里添加额外的清理逻辑
});
</script>

<template>
  <div class="app-container">
    <GlobalNotification />
    <router-view />
  </div>
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

* {
  box-sizing: border-box;
}

#app, .app-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.app-header {
  text-align: center;
  padding: 20px;
  background-color: #409eff;
  color: white;
}

.app-main {
  padding: 20px;
  flex: 1;
}

/* Reset some basic elements */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

/* Make router-view fill available space */
router-view {
  display: block;
  width: 100%;
  height: 100%;
}

/* Force hide all close buttons in Element Plus messages and notifications */
.el-message .el-message__closeBtn,
.el-notification .el-notification__closeBtn {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
</style>
